<template>
  <div>
    <zero-photo-swipe ref="zeroPhoto"></zero-photo-swipe>
    <div class="my-gallery">

      <figure style="float:left;margin-inline-start:0px;margin-inline-end:0px;">
        <a href="/static/img/b.jpg" data-size="10x10">
          <img @mouseover="imgMouseOver(1)"  id="img1" src="/static/img/b.jpg"  style="max-width:100%;float:left;height:250px;border-radius: 5px;"  v-on:load="loadImgSize($event)"/>
          <div id="mask1" @mouseout="imgMouseOut(1)" style="display:none;width:100%;height:100%;background: #ffffff;opacity: 0.4;position: absolute;top:0px;left: 0px;">
              <img id="mag1" src="@/assets/img/mag.png" style="width:60px;height:60px;"/>
          </div>
        </a>
      </figure>
      <!--<div style="width:30px;height:100px;margin-left:30px;float:left;background: #ff0000;"></div>-->
      <figure style="float:left;margin-inline-start:0px;margin-inline-end:0px;">
        <a href="/static/img/c.jpg" data-size="10x10">
          <img @mouseover="imgMouseOver(2)"  id="img2" src="/static/img/c.jpg" style="max-width:100%;float:left;height:250px;margin-left: 20px;border-radius: 5px;"  v-on:load="loadImgSize($event)"/>
          <div id="mask2" @mouseout="imgMouseOut(2)" style="display:none;width:100%;height:100%;background: #ffffff;opacity: 0.4;position: absolute;top:0px;left: 0px;">
            <img id="mag2" src="@/assets/img/mag.png" style="width:60px;height:60px;"/>
          </div>
        </a>
      </figure>
      <figure style="float:left;margin-inline-start:0px;margin-inline-end:0px;">
        <a href="/static/img/tbh.jpeg" data-size="10x10">
          <img @mouseover="imgMouseOver(3)"  id="img3" src="/static/img/tbh.jpeg" style="max-width:100%;float:left;height:250px;margin-left: 20px;border-radius: 5px;"  v-on:load="loadImgSize($event)"/>
          <div id="mask3" @mouseout="imgMouseOut(3)" style="display:none;width:100%;height:100%;background: #ffffff;opacity: 0.4;position: absolute;top:0px;left: 0px;">
            <img id="mag3" src="@/assets/img/mag.png" style="width:60px;height:60px;"/>
          </div>
        </a>
      </figure>

      <figure style="float:left;margin-inline-start:0px;margin-inline-end:0px;">
        <a href="/static/img/qx.jpeg" data-size="10x10">
          <img @mouseover="imgMouseOver(4)"  id="img4" src="/static/img/qx.jpeg" style="max-width:100%;float:left;height:250px;margin-left: 20px;border-radius: 5px;"  v-on:load="loadImgSize($event)"/>
          <div id="mask4" @mouseout="imgMouseOut(4)" style="display:none;width:100%;height:100%;background: #ffffff;opacity: 0.4;position: absolute;top:0px;left: 0px;">
            <img id="mag4" src="@/assets/img/mag.png" style="width:60px;height:60px;"/>
          </div>
        </a>
      </figure>

      <figure style="float:left;margin-inline-start:0px;margin-inline-end:0px;">
        <a href="/static/img/lb.jpeg" data-size="10x10">
          <img @mouseover="imgMouseOver(5)"  id="img5" src="/static/img/lb.jpeg" style="max-width:100%;float:left;height:250px;margin-left: 20px;border-radius: 5px;"  v-on:load="loadImgSize($event)"/>
          <div id="mask5" @mouseout="imgMouseOut(5)" style="display:none;width:100%;height:100%;background: #ffffff;opacity: 0.4;position: absolute;top:0px;left: 0px;">
            <img id="mag5" src="@/assets/img/mag.png" style="width:60px;height:60px;"/>
          </div>
        </a>
      </figure>


      <figure style="float:left;margin-inline-start:0px;margin-inline-end:0px;">
        <a href="/static/img/gy.jpeg" data-size="10x10">
          <img @mouseover="imgMouseOver(6)"  id="img6" src="/static/img/gy.jpeg" style="max-width:100%;float:left;height:250px;margin-left: 20px;border-radius: 5px;"  v-on:load="loadImgSize($event)"/>
          <div id="mask6" @mouseout="imgMouseOut(6)" style="display:none;width:100%;height:100%;background: #ffffff;opacity: 0.4;position: absolute;top:0px;left: 0px;">
            <img id="mag6" src="@/assets/img/mag.png" style="width:60px;height:60px;"/>
          </div>
        </a>
      </figure>

    </div>
  </div>
</template>
<script>
import ZeroPhotoSwipe from "../components/PhotoSwipe.vue";
export default {
  name: 'Gallery',
  components: {
    ZeroPhotoSwipe
  },

  mounted(){
    // 调用初始化图片photoswipe
    this.$refs.zeroPhoto.initPhotoSwipeFromDOM('.my-gallery')
  },
  methods:{
    /**
     * 加载图片结束时自动添加photoswipe需要的data-size
     * @param e
     */
    loadImgSize(e) {
      var target = e.currentTarget
      var x = target.clientWidth
      var y = target.clientHeight

      target.dataSize = `${x}x${y}`
      target.parentNode.setAttribute('data-size', `${x}x${y}`)
    },
    imgMouseOver(id) {
      //alert(id);
      //let idmask="mask"+id;
      let rect = document.getElementById("img"+id).getBoundingClientRect();
      console.log(rect);

      let mask = document.getElementById("mask"+id);
      mask.style.left = rect.left +'px';
      mask.style.top = rect.top +'px';
      mask.style.width = rect.width +'px';
      mask.style.height = rect.height +'px';
      //mask.style.lineHeight = rect.height +'px';

      let mag = document.getElementById("mag"+id);
      mag.style.marginTop = (rect.height-60)/2 +'px';
      mask.style.display = "";
    },
    imgMouseOut(id) {
      let mask = document.getElementById("mask"+id);
      mask.style.display = "none";
    },
  }
}
</script>